import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Form, Table, Divider, Row, Col, Select, Button } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link, routerRedux } from 'dva/router';
import ConfirmModal from '../../components/_public/ConfirmModal';
import LessonPreview from '../../components/_public/LessonPreview';

import { getParamUrl } from '../../utils/formatDataSource';

@connect(({ lesson3, loading }) => ({
  lesson:lesson3,
  loading: loading.models.lesson3,
}))
@Form.create()
class LessonInfo extends PureComponent {
  state = {
    lessonId: 0,
    visible: false,
    previewShow: false,
    deleteType: 0, // 当前删除配置对应的类型
    content: [],
  };
  componentDidMount() {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    dispatch({
      type: 'lesson3/getLessonInfoDetail',
      payload: {
        ...params,
        subject: 1,
      },
    });

    dispatch({
      type: 'lesson3/getInfoConfig',
      payload: params,
    });

    dispatch({
      type: 'lesson3/lessonInfo',
      payload: params,
    });

    this.setState({
      lessonId: params.lessonId,
    });
  }

  preview = () => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    dispatch({
      type: 'lesson3/initCourseware',
      payload: {
        lessonId: params.lessonId,
      },
    }).then(() => {
      const { initCourse } = this.props.lesson;
      this.setState({
        content: initCourse.content,
        previewShow: true,
      });
    });
  };

  previewOk = () => {
    this.setState({ previewShow: false });
  };

  previewCancel = () => {
    this.setState({ previewShow: false });
  };

  handleComplete = () => {
    const { dispatch } = this.props;

    dispatch({
      type: 'lesson3/saveBk',
      payload: {
        lessonId: this.state.lessonId,
      },
    });
  };
  getParentLesson = lessonId => {
    const lesson = sessionStorage.getItem(`current-lesson-info_${lessonId}`);
    // todo
    // sessionStorage.removeItem(`current-lesson-info_${lessonId}`);
    return JSON.parse(lesson);
  };
  toDetailPage = item => {
    sessionStorage.setItem('lessonId', this.state.lessonId);
    sessionStorage.setItem('lessonType', 1);
    this.props.dispatch(routerRedux.push(`/studentManage/student/info?studentId=${item.id}`));
  };

  studentColumn = () => {
    return [
      {
        title: '姓名',
        dataIndex: 'studentName',
        key: 'studentName',
      },
      {
        title: '年级',
        dataIndex: 'classLevel',
        key: 'classLevel',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      },
      {
        title: '上次作业成绩',
        dataIndex: 'lastScore',
        key: 'lastScore',
      },
      {
        title: '上次考勤',
        dataIndex: 'kq',
        key: 'kq',
      },
      {
        title: '操作',
        key: 'action',
        render: item => {
          return (
            <a href="javascript:;" onClick={() => this.toDetailPage(item)}>
              查看
            </a>
          );
        },
      },
    ];
  };

  toOnePage = value => {
    const { lessonId } = this.state;

    switch (value) {
      case 5:
        return <Link to={`/lesson/courseware/config?lessonId=${lessonId}`}>配置</Link>;
      case 4:
        return <Link to={`/lesson/homework/config?lessonId=${lessonId}`}>配置</Link>;
      case 2:
        return <Link to={`/lesson/outExam?lessonId=${lessonId}`}>配置</Link>;
      case 1:
        return <Link to={`/lesson/inExam?lessonId=${lessonId}`}>配置</Link>;
      case 6:
        return <Link to={`/lesson/exam/wrong?lessonId=${lessonId}`}>配置</Link>;
      case 3:
        return <Link to={`/lesson/commonExam?lessonId=${lessonId}`}>配置</Link>;
      case 7:
        return <Link to={`/lesson/conceptConfig?lessonId=${lessonId}`}>配置</Link>;
      default:
        return <div />;
    }
  };

  toEditPage = value => {
    const { lessonId } = this.state;

    switch (value) {
      case 5:
        return <Link to={`/lesson/courseware/config?lessonId=${lessonId}&type=1`}>编辑</Link>;
      case 4:
        return <Link to={`/lesson/homework/config?lessonId=${lessonId}&type=1`}>编辑</Link>;
      case 2:
        return <Link to={`/lesson/outExam?lessonId=${lessonId}&type=1`}>编辑</Link>;
      case 1:
        return <Link to={`/lesson/inExam?lessonId=${lessonId}&type=1`}>编辑</Link>;
      case 6:
        return <Link to={`/lesson/exam/wrong?lessonId=${lessonId}&type=1`}>编辑</Link>;
      case 3:
        return <Link to={`/lesson/commonExam?lessonId=${lessonId}&type=1`}>编辑</Link>;
      case 7:
        return <Link to={`/lesson/conceptConfig?lessonId=${lessonId}&type=1`}>编辑</Link>;
      default:
        return <div />;
    }
  };

  onClicktest = () => {
    const { dispatch, location: { search } } = this.props;

    dispatch(routerRedux.push(`/lesson/inExam?lessonId=1`));
  };

  commonColumn = value => {
    return [
      {
        title: value,
        dataIndex: 'point',
        key: 'point',
        width: '30%',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: '30%',
      },
      {
        title: '操作',
        key: 'action',
        width: '40%',
        render: record => (
          <span>
            <Button
              hidden={
                record.statusId === 1 || (record.lessonStatus !== 0 && record.lessonStatus !== 1)
              }
              type="primary"
            >
              {this.toOnePage(record.typeIndex)}
            </Button>
            <span
              hidden={
                !(record.statusId === 1 && (record.lessonStatus === 1 || record.lessonStatus === 0))
              }
            >
              <Button
                type="primary"
                disabled={record.lessonStatus !== 0 && record.lessonStatus !== 1}
              >
                {this.toEditPage(record.typeIndex)}
              </Button>&nbsp;&nbsp;
              <Button
                onClick={() => this._m3(record)}
                hidden={record.lessonStatus !== 0 && record.lessonStatus !== 1}
              >
                删除配置
              </Button>
            </span>
            <span
              hidden={
                !(
                  record.statusId === 1 &&
                  (record.lessonStatus === 3 ||
                    record.lessonStatus === 4 ||
                    record.lessonStatus === 5)
                )
              }
              type="primary"
            >
              {/*<Button hidden={record.typeIndex !== 5} onClick={this.preview} type="primary">*/}
              {/*查看*/}
              {/*</Button>*/}
              <Button
                hidden={!(record.typeIndex === 4 && record.lessonStatus === 3)}
                type="primary"
              >
                <Link to={`/lesson/correct/homework?lessonId=${this.state.lessonId}`}>去批改</Link>
              </Button>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <Button hidden={record.typeIndex !== 4} type="primary">
                <Link to={`/lesson/exam/score?lessonId=${this.state.lessonId}&examType=4`}>
                  查看得分
                </Link>
              </Button>
              <Button hidden={record.typeIndex !== 2} type="primary">
                <Link to={`/lesson/exam/score?lessonId=${this.state.lessonId}&examType=2`}>
                  查看得分
                </Link>
              </Button>
              <Button hidden={record.typeIndex !== 3} type="primary">
                <Link to={`/lesson/exam/score?lessonId=${this.state.lessonId}&examType=3`}>
                  查看得分
                </Link>
              </Button>
            </span>
          </span>
        ),
      },
    ];
  };

  courseWareDatasource = (value, index) => {
    const dataSource = [
      {
        key: '1',
        id: '1',
        point: value.courseware.title === null ? '--- --' : value.courseware.title,
        status: value.courseware.readyStatus === 0 ? '未配置' : '已配置',

        // native id
        lessonStatus: value.currentLessonStatus,
        statusId: value.courseware.readyStatus,
        typeIndex: index,
      },
    ];
    return dataSource;
  };

  homeworkDatasource = (value, index) => {
    const dataSource = [
      {
        key: '1',
        id: '1',
        point: value.homework.title === null ? '--- --' : value.homework.title,
        status: value.homework.readyStatus === 0 ? '未配置' : '已配置',

        // native id
        lessonStatus: value.currentLessonStatus,
        statusId: value.homework.readyStatus,
        typeIndex: index,
      },
    ];
    return dataSource;
  };

  cHomeworkDatasource = (value, index) => {
    console.log(value);
    const dataSource = [
      {
        key: '1',
        id: '1',
        point: value.conceptHomework.title === null ? '--- --' : value.conceptHomework.title,
        status: value.conceptHomework.readyStatus === 0 ? '未配置' : '已配置',

        // native id
        lessonStatus: value.currentLessonStatus,
        statusId: value.conceptHomework.readyStatus,
        typeIndex: index,
      },
    ];
    return dataSource;
  };

  outExamDatasource = (value, index) => {
    const dataSource = [
      {
        key: '1',
        id: '1',
        point: value.outExam.title === null ? '--- --' : value.outExam.title,
        status: value.outExam.readyStatus === 0 ? '未配置' : '已配置',

        // native id
        lessonStatus: value.currentLessonStatus,
        statusId: value.outExam.readyStatus,
        typeIndex: index,
      },
    ];
    return dataSource;
  };

  inDatasource = (value, index) => {
    const dataSource = [
      {
        key: '1',
        id: '1',
        point: value.inExam.title === null ? '--- --' : value.inExam.title,
        status: value.inExam.readyStatus === 0 ? '未配置' : '已配置',

        // native id
        lessonStatus: value.currentLessonStatus,
        statusId: value.inExam.readyStatus,
        typeIndex: index,
      },
    ];
    return dataSource;
  };

  errorCourseDatasource = (value, index) => {
    const dataSource = [
      {
        key: '1',
        id: '1',
        point: value.error.title === null ? '--- --' : value.error.title,
        status: value.error.readyStatus === 0 ? '未配置' : '已配置',

        // native id
        lessonStatus: value.currentLessonStatus,
        statusId: value.error.readyStatus,
        typeIndex: index,
      },
    ];
    return dataSource;
  };

  examDatasource = (value, index) => {
    const dataSource = [
      {
        key: '1',
        id: '1',
        point: value.exam.title === null ? '--- --' : value.exam.title,
        status: value.exam.readyStatus === 0 ? '未配置' : '已配置',

        // native id
        lessonStatus: value.currentLessonStatus,
        statusId: value.exam.readyStatus,
        typeIndex: index,
      },
    ];
    return dataSource;
  };

  handleChange = value => {};

  _m1 = value => {
    const { deleteType, lessonId } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'lesson3/removeCourse',
      payload: {
        lessonId: lessonId,
        type: deleteType,
      },
    }).then(() => {
      dispatch({
        type: 'lesson3/getInfoConfig',
        payload: {
          lessonId: lessonId,
        },
      });
    });

    this.setState({
      visible: value,
    });
  };

  _m2 = value => {
    this.setState({
      visible: value,
    });
  };

  _m3 = item => {
    this.setState({
      visible: true,
      deleteType: item.typeIndex,
    });
  };

  render() {
    const { location: { search } } = this.props;
    const urlParams = getParamUrl(search);
    // const lessonInfo = this.getParentLesson(urlParams.lessonId);

    const dataSource = [];

    const { studentInfo = {}, configInfo = {}, lessonInfo = {} } = this.props.lesson;

    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <Row>
            <Col span={8}>
              上课时间：<strong>{`${lessonInfo.lessonDate}  ${lessonInfo.timeFrom} - ${
                lessonInfo.timeTo
              }`}</strong>
            </Col>
            <Col span={4}>
              课程类型：<strong>{lessonInfo.typeName}</strong>
            </Col>
            <Col span={4}>
              课程状态：<strong>{lessonInfo.classStatusName}</strong>
            </Col>
            <Col span={8} style={{ textAlign: 'right' }}>
              <Button
                type="primary"
                size="small"
                onClick={this.handleComplete}
                hidden={!(lessonInfo.classStatus == 0 || lessonInfo.classStatus == 1)}
              >
                备课完成
              </Button>&nbsp;&nbsp;
              <Button
                type="primary"
                size="small"
                onClick={() => this.props.dispatch(routerRedux.push('/lesson/time'))}
              >
                返回
              </Button>
            </Col>
          </Row>
        </Card>
        <Divider />
        <Card bordered={false}>
          <span style={{ fontSize: '20px' }}>
            <strong>学生明细</strong>
          </span>
          <Table
            dataSource={studentInfo.data}
            columns={this.studentColumn()}
            loading={this.props.loading}
            onChange={this.handleChange}
            bordered
            pagination={{ total: studentInfo.total, hideOnSinglePage: true }}
            size="small"
            style={{ marginTop: '20px', marginBottom: '20px' }}
          />
          <span style={{ fontSize: '20px' }}>
            <strong>入门考</strong>
          </span>
          <Table
            dataSource={this.inDatasource(configInfo, 1)}
            columns={this.commonColumn('名称')}
            loading={this.props.loading}
            onChange={this.handleChange}
            bordered
            pagination={{ hideOnSinglePage: true }}
            size="small"
            style={{ marginTop: '20px', marginBottom: '20px' }}
          />
          <span style={{ fontSize: '20px' }}>
            <strong>课件配置</strong>
          </span>
          <Table
            dataSource={this.courseWareDatasource(configInfo, 5)}
            columns={this.commonColumn('名称')}
            loading={this.props.loading}
            onChange={this.handleChange}
            bordered
            pagination={{ hideOnSinglePage: true }}
            size="small"
            style={{ marginTop: '20px', marginBottom: '20px' }}
          />
          <span style={{ fontSize: '20px' }}>
            <strong>错题</strong>
          </span>
          <Table
            dataSource={this.errorCourseDatasource(configInfo, 6)}
            columns={this.commonColumn('名称')}
            loading={this.props.loading}
            onChange={this.handleChange}
            bordered
            pagination={{ hideOnSinglePage: true }}
            size="small"
            style={{ marginTop: '20px', marginBottom: '20px' }}
          />
          <span style={{ fontSize: '20px' }}>
            <strong>试卷</strong>
          </span>
          <Table
            dataSource={this.examDatasource(configInfo, 3)}
            columns={this.commonColumn('名称')}
            loading={this.props.loading}
            onChange={this.handleChange}
            bordered
            pagination={{ hideOnSinglePage: true }}
            size="small"
            style={{ marginTop: '20px', marginBottom: '20px' }}
          />
          <span style={{ fontSize: '20px' }}>
            <strong>出门考</strong>
          </span>
          <Table
            dataSource={this.outExamDatasource(configInfo, 2)}
            columns={this.commonColumn('名称')}
            loading={this.props.loading}
            onChange={this.handleChange}
            bordered
            pagination={{ hideOnSinglePage: true }}
            size="small"
            style={{ marginTop: '20px', marginBottom: '20px' }}
          />
          <span style={{ fontSize: '20px' }}>
            <strong>作业</strong>
          </span>
          <Table
            dataSource={this.homeworkDatasource(configInfo, 4)}
            columns={this.commonColumn('名称')}
            loading={this.props.loading}
            onChange={this.handleChange}
            bordered
            pagination={{ hideOnSinglePage: true }}
            size="small"
            style={{ marginTop: '20px', marginBottom: '20px' }}
          />
          <span style={{ fontSize: '20px' }}>
            <strong>概念作业题</strong>
          </span>
          <Table
            dataSource={this.cHomeworkDatasource(configInfo, 7)}
            columns={this.commonColumn('名称')}
            loading={this.props.loading}
            onChange={this.handleChange}
            bordered
            pagination={{ hideOnSinglePage: true }}
            size="small"
            style={{ marginTop: '20px', marginBottom: '20px' }}
          />
        </Card>

        <ConfirmModal
          visible={this.state.visible}
          dataSource={{ title: '删除', content: '确认要删除吗?' }}
          handleOk={this._m1}
          handleCancel={this._m2}
        />
      </PageHeaderLayout>
    );
  }
}

export default LessonInfo;
